import React, {useEffect} from 'react';
import {Layout, Menu}  from 'antd';
import {Outlet, useNavigate} from 'react-router-dom';
import useSelectedMenuKey from '@/hooks/useSelectedMenuKey';
import menus from './menus.config.js';
import styles from './Framework.modules.scss?inline'

const { Header, Content } = Layout;

const Framework = () => {
  const selectedMenuKey = useSelectedMenuKey();
  const navigate = useNavigate();

  // 点击菜单
  const handleClickMenu = (menu) =>　{
    navigate(menu.key);
  }

  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.menu}>
          <Menu
            mode={"horizontal"}
            selectedKeys={selectedMenuKey}
            defaultSelectedKeys={selectedMenuKey}
            items={menus}
            onClick={handleClickMenu}
          />
        </div>
      </Header>
      <Content className={styles.contentContainer}>
        <div>
          <Outlet></Outlet>
        </div>
      </Content>
    </Layout>
  )
}

export default Framework;
